<!--
 * @Descripttion: 访客记录
 * @version: 
 * @Author: wl
 * @Date: 2020-05-21 17:00:50
 * @LastEditors: wl
 * @LastEditTime: 2020-05-23 17:22:25
--> 
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="姓名：">
            <el-input
              class="normal"
              placeholder="请输入"
              @keydown.enter.native="handleQuery"
              clearable
              v-model="filters.username"
            ></el-input>
          </el-form-item>
          <el-form-item label="选择小区：">
            <el-select
              v-model="filters.CID"
              filterable
              @change="handleQuery"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起始时间：">
            <el-date-picker
              v-model="filters.startTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="filters.endTime"
              class="normal"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div slot="btnSearch">
        <el-button @click="handleQuery('a')">查询</el-button>
      </div>
      <div slot="content">
        <el-table
        :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <!-- <el-table-column
            prop="pic"
            header-align="center"
            align="center"
            label="人像"
          >
            <template slot-scope="scope">
              <img
                :src="scope.row.pic ? getItemPhoto(pic) : ''"
                alt
                style="width: 50px; height: 50px"
                v-image-preview
              />
            </template>
          </el-table-column> -->
          <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="姓名"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="Sex"
            header-align="center"
            align="center"
            label="性别"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.person.info.Sex == 0">男</span>
              <span v-if="scope.row.person.info.Sex == 1">女</span>
              <span v-else>-</span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="CName"
            header-align="center"
            align="center"
            label="小区名称"
          >
          </el-table-column>
          <el-table-column
            prop="Idcard"
            header-align="center"
            align="center"
            label="身份证号"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            align="center"
            label="陌生人"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0">是</span>
              <span v-if="scope.row.type == 1">否</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="IName"
            header-align="center"
            align="center"
            label="设备点位"
          >
          </el-table-column>
          <el-table-column
            prop="direction"
            header-align="center"
            align="center"
            label="进出方向"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.direction == 2">出</span>
              <span v-if="scope.row.direction == 1">进</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="deviceid"
            header-align="center"
            align="center"
            label="人员类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.person && scope.row.person.type">{{
                scope.row.person.type
                  ? types.find((item) => {
                      return item.DID == scope.row.person.type;
                    }).name
                  : "不详"
              }}</span>
              <!-- <span v-if="scope.row.direction==1">进</span> -->
            </template>
          </el-table-column>
          <!-- <el-table-column prop="deviceid" header-align="center" align="center" label="设备ID"></el-table-column> -->
          <el-table-column
            prop="insertTime"
            header-align="center"
            align="center"
            label="通行时间"
          ></el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="200"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                @click="handleEditImg(scope.row)"
                :disabled="!hasPerm('pass:strategy:details')"
                >查看照片</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 头像 -->
        <!-- 弹框 -->
        <el-dialog
          :visible.sync="dialogVisibleImg"
          :before-close="handleClose"
          width="30%"
        >
          <img
            style="width: 100%"
            :src="getItemPhoto(currentImg)"
            class="imgDia"
            v-image-preview
          />
        </el-dialog>
      </div>
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float: right"
        >
        </el-pagination>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentImg:"",
      dialogVisibleImg:false,
      // 小区
      getCommunity: [],
      asideShow: false,
      unitShow: false,
      pageResult: [],
      filters: {
        username: "",
        CID: "",
        types: "9cfc06e1-8285-4c05-81e6-69a33b0d8e38",
        startTime: "",
        endTime: "",
      },
      pageRequest: {
        page: 1,
        pageSize: 10,
      },
      columns: [],
      loading: false,
      totalSize: 0,
      exportUrl: this.global.baseUrl + "/self_test_stat/export",
      exportLoading: false,
    };
  },
  methods: {
    handleClose() {
      this.dialogVisibleImg = false;
    },
    // 查看头像
    handleEditImg: function (params) {
      if (params.pic) {
        this.currentImg = params.pic;
      }
      this.dialogVisibleImg = true;
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "pic/" + id;
      return url;
    },
    handleQuery: function (val) {
      this.loading = true;
      let params = {};
      params = {
        where: this.filters,
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
      };
      let param = JSON.stringify(params);

      this.$api.personPass
        .personPassFind(params)
        .then((res) => {
          if (res.code == 0) {
            this.loading = false;
            this.pageResult = res.data;
            this.totalSize = res.count;
            this.pageResult.map((item) => {
              item.insertTime = this.$format(item.insertTime);
              if (item.info) {
                item.name = item.info.persionName || "";
              }
              if (item.device) {
                item.IName = item.device.Name;
              }
              if (item.person) {
                item.Idcard =
                  item.person.info.Idcard.slice(0, 4) +
                    "****" +
                    item.person.info.Idcard.slice(16, 18) || "";
                item.Sex = item.person.info.Sex || "/";
              }
            });
          } else {
            this.loading = false;
            this.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message({
            type: "error",
            message: "请求超时" + err,
          });
        });
    },

    //获取小区的列表选择器
    getCommunityList() {
      let params = {};
      params = {
        where: {
          CODES: [],
        },
      };

      let param = JSON.stringify(params);

      this.$api.three.communityList(params).then((res) => {
        if (res.code == 0) {
          this.getCommunity = res.data;
          //  this.totalSize = res.count;
          // this.pageResult.map(item => {
          //   item.insertTime = this.$format(item.insertTime);

          // });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },

    refreshPageRequest(page) {
      this.pageRequest.page = page;

      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },
  },
  mounted() {
    // let dictList = JSON.parse(sessionStorage.getItem("dictData"));
    // this.types = dictList.sys_person_type;
    // console.log(this.types)
    this.handleQuery();
    this.getCommunityList();
  },
};
</script>

<style>
</style>